<template>
    <h1>求和：{{ sum }}</h1>
    <button @click="getSum">点我+1</button>
    <h1>求差：{{ difference }}</h1>
    <button @click="getDifference">点我-1</button>
    <br>
    <hr>
    <button @click="getDog">求狗</button>
    <br>
    <img v-for="(dogUrl,index)  in dogList" :key="index" :src="dogUrl" class="dog">
</template>

<script setup lang="ts" name="NoHook">
import axios from 'axios';
import { ref } from 'vue';
    //数据
    let sum=ref(0)
    let difference=ref(100)
    let dogList=ref<string[]>([])

    //函数函数
    //求和
    function getSum(){
        sum.value+=1;
    }
    //求差函数
    function getDifference(){
        difference.value-=1;
    }
    //求狗函数  
    //async 修饰函数，会把同步函数变成异步函数
    async function getDog(){
        //使用axios(ajax的封装)向后端服务器发送请求，获取响应数据
        //await等待响应成功  请求-->响应
        let {data}=await axios.get('https://dog.ceo/api/breeds/image/random')
        //console.log(data);
        dogList.value.push(data.message);
    }


</script>


<style scoped>
    .dog{
        height: 200px;
        margin: 10px;
    }
</style>
